<template>  

    
      <!-- tabcontainer -->  
      <div>
          <ul>
            <li>
              <div class="breviary clearfix"><img src="~src/images/details.png" alt=""></div>
              <div class="details ">
                <h2 class="title">点击领取参观入场券：2017北京全球 INS大会主体分享活动</h2>
                <div class="tab">
                  <span>马云</span>
                  <span>腾讯</span>
                  <span>奖品多</span>
                </div>
                <p class="time">2017.09.01 9:00-2017.09.02 9:00</p>
                <p class="address">广交会展馆B区12.1馆
                  <span class="already">已报名</span> 
                </p>
              </div>
            </li>
            <li>
              <div class="breviary clearfix"><img src="~src/images/details.png" alt=""></div>
              <div class="details ">
                <h2 class="title">点击领取参观入场券：2017北京全球 INS大会主体分享活动</h2>
                <div class="tab">
                  <span>马云</span>
                  <span>腾讯</span>
                  <span>奖品多</span>
                </div>
                <p class="time">2017.09.01 9:00-2017.09.02 9:00</p>
                <p class="address">广交会展馆B区12.1馆
                  <span class="already">已报名</span> 
                </p>
              </div>
            </li>
          </ul>
      
        </div>
</template>  
  
<script>  


</script>  
<style lang="stylus" scoped>
   
    ul
     li 
       display flex
       flex-flow row
       padding 0.2415rem 0.3623rem
       border-bottom 0.0242rem solid #DDDDDD
       position relative 
       background-size 100% 100%
       .breviary
         width 2.4155rem
         height 2.4155rem
         img
            width 100%
            height 2.4155rem
            border 0.0242rem solid #ddd
       .details
          flex  1
          padding-left  0.2899rem
          h2
            font-size 0.3382rem
            padding-right 0.3382rem
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          .tab
            font-size 0.2899rem
            margin-top 0.1208rem
            span 
              display: inline-block;
              border: 1px solid #999;
              padding: 0rem 7px
              text-align: center;
              border-radius: 0.2174rem;
              color: #666;
              padding-bottom: 1px;
          .time
            font-size 0.2899rem
            color #999999
            margin-top 0.0966rem
          .address
            font-size 0.3382rem
            margin-top 0.0483rem
            position relative
          .already
            font-size: 0.2899rem;
            color: #0da4dc;
            position: absolute;
            bottom: 0rem;
            right: 0rem;

</style>
